<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function (){
            var elementById = document.getElementById("form");
            var username=elementById.username
            var pwd1=elementById.pwd1
            var pwd2=elementById.pwd2
            var email=elementById.email
            elementById.onsubmit=function (){
                if(username.value==""||pwd1.value==""||pwd2.value==""||email.value==""){
                    alert("输入不能为空")
                    pwd1.value=""
                    pwd2.value=""
                    return false
                }
                if(username.value.length<4||username.value.length>6){
                    alert("用户名长度为4-6")
                    return false
                }
                if(pwd1.value.length!=6){
                    alert("密码长度需要为6")
                    pwd1.value=""
                    pwd2.value=""
                    return false
                }
                if(pwd1.value!=pwd2.value){
                    alert("两次密码输入不同")
                    pwd1.value=""
                    pwd2.value=""
                    return false
                }

                //邮件正则表达式
                //String regStr="^[\\w-]+@([a-zA-Z]+\\.)+[a-zA-Z]+$"
                //在java中转义符是\\，在js中正则表达式转义符是\
                var emailPattern=/^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/
                if(!emailPattern.test(email.value)){
                    alert("邮箱格式不对")
                    email.value=""
                    return false
                }

                return true
            }
        }
    </script>
</head>
<body>
<form action="ok.html" id="form">
    <h1>注册用户</h1>
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
            <td>长度(4-6)</td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="pwd1"></td>
            <td>长度(6)</td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password" name="pwd2"></td>
            <td>长度(6)</td>
        </tr>
        <tr>
            <td>电子邮箱</td>
            <td><input type="email" name="email"></td>
            <td>满足基本格式</td>
        </tr>
    </table>
    <input type="submit" value="注册">
</form>
</body>
</html>